<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>工时系统</title>
    <link rel="stylesheet" href="/plugins/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" type="text/css" href="/build/css/css/font-awesome.min.css"/>
    <link rel="stylesheet" type="text/css" href="/css/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="/css/my-style.css"/>
    <link rel="stylesheet" type="text/css" href="/ztree/3.5/css/metro/zTreeStyle.css"/>
    <style type="text/css">
        body {
            padding: 10px 30px;
        }

        .hide {
            display: none
        }
        .layui-layer-setwin .layui-layer-max {
            display: none;
        }
        .layui-input-block {
            margin-left: 150px;
        }

        .layui-form-label {
            width: 110px;
        }
    </style>
</head>

<body>
<div class="kit-doc">
    <div class="layui-card layui-card-body">
        <!-- 表格增删改查btn -->
        <div class="layui-btn-group layui-m-b-5">
            <button class="layui-btn layui-btn-sm" id="modal1">
                <i class="fa fa-plus"> </i>&nbsp;增加
            </button>
        </div>
        <div class="layui-btn-group layui-m-b-5">
            <button class="layui-btn layui-btn-sm" id="all-up">
                <i class="fa fa-plus"> </i>&nbsp;全部收起
            </button>
        </div>
        <div class="layui-btn-group layui-m-b-5">
            <button class="layui-btn layui-btn-sm" id="all-down">
                <i class="fa fa-plus"></i>&nbsp;全部打开
            </button>
        </div>
        <div class="test-tree-table" lay-filter="test1"></div>
    </div>
</div>
<!-- 弹框content -->
<div id="modal-content1" style="display: none; padding:20px;">
    <form class="layui-form" >
        <div class="layui-form-item">
            <label class="layui-form-label">菜单类型
                <span style="color: red">★</span>：
            </label>
            <div class="layui-input-block">
                <select name="resourceType" lay-verify="required" id="resourceType">
                    <option value="M">菜单目录</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label" name="resourceName">菜单名称
                <span style="color: red">★</span>：
            </label>
            <div class="layui-input-block">
                <input type="text" name="resourceName" required lay-verify="required" placeholder="请输入菜单名称" autocomplete="off" class="layui-input"/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">url
                <span style="color: red">★</span>：
            </label>
            <div class="layui-input-block">
                <input type="text" name="url" required lay-verify="required" placeholder="请输入url路径" autocomplete="off" class="layui-input"/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" name="resourceName">排序
                <span style="color: red">★</span>：
            </label>
            <div class="layui-input-block">
                <input type="text" name="orderNum" required lay-verify="required" oninput="value=value.replace(/[^\d]/g,'')" placeholder="请输入排序数字" autocomplete="off" class="layui-input"/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" name="resourceName">备注：</label>
            <div class="layui-input-block">
                <textarea name="remark" placeholder="请输入内容" id="remark" class="layui-textarea" ></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn"  lay-submit="" lay-filter="formDemo">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>

<script src="../../static/plugins/layui/layui.js" th:src="@{/plugins/layui/layui.js}"></script>
<script type="text/javascript" src="../../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
<script type="text/javascript" src="../../static/js/jquery.easyui.min.js" th:src="@{/js/jquery.easyui.min.js}"></script>
<script src="/ztree/3.5/js/jquery.ztree.all-3.5.js"></script>
<script src="/js/ry-ui.js"></script>
<!--展示树形菜单表-->
<script type="text/javascript">
    layui.config({
        base: '/js/',
    })
    var data;
    layui.use(['treetable', 'table', 'form'], function () {
        var table = layui.table;
        var $ = layui.$, treetable = layui.treetable;

        $.ajax({
            type: "GET",//请求方式
            async: false,
            url: "/system/resource/getAll",//地址，就是json文件的请求路径
            dataType: "json",//数据类型可以为 text xml json  script  jsonp
            success: function (result) {//返回的参数就是 action里面所有的有get和set方法的参数
                data = result;
            }
        });
        treetable.render({
            elem: '.test-tree-table',
            data: data,
            field: 'resourceName',
            cols: [
                {
                    field: 'resourceName',
                    title: '菜单名称',
                    width: '20%'
                },
                {
                    field: 'resourceType',
                    title: '菜单类型',
                    width: '10%',
                    templet: '#resourceTypeTpl'
                },
                {
                    field: 'url',
                    title: 'url',
                    width: '10%'
                },
                {
                    field:'perms',
                    title: "权限表达式",
                    width:'10%'
                },
                {
                    field: 'createBy',
                    title: '创建者',
                    width: '10%'
                },
                {
                    field: 'remark',
                    title: '备注',
                    width: '10%'
                },
                {
                    field: 'actions',
                    title: '操作',
                    width: '30%',
                    data: [
                        '<a href="#"  onclick="addResource(this)">新增&nbsp;&nbsp;&nbsp;</a>' +
                        '<a href="#" onclick="editResource(this)">编辑&nbsp;&nbsp;&nbsp;</a>' +
                        '<a href="#" onclick="deleteResource(this)">删除</a>',
                    ]
                }
            ]
        });

        $('#all-up').click(function () {
            treetable.all('up');
        })

        $('#all-down').click(function () {
            treetable.all('down');
        })

        for (var i = 0; i < data.length; i++) {
            var typeDiv = $("tr[data-tb-id=" + data[i].id + "] td:eq(1) div");
            var typeDiv2 = $("tr[data-tb-id=" + data[i].id + "] td:eq(6) div");
            if (data[i].resourceType == 'C') {
                typeDiv.text("菜单");
            } else if (data[i].resourceType == 'F') {
                typeDiv.text("按钮");
                $(typeDiv2.children("a")[0])[0].hidden=true;
            } else {
                typeDiv.text("目录");
            }
        }
    });
</script>

<!-- 表单 -->
<script>
    layui.use(['form', 'layedit', 'laydate'], function () {
        var form = layui.form,
            layer = layui.layer,
            layedit = layui.layedit,
            laydate = layui.laydate;

        //日期
        laydate.render({
            elem: '#date'
        });
        laydate.render({
            elem: '#date1'
        });

        var $ = layui.$;
        //监听提交
        form.on('submit(formDemo)', function (data) {
            var flag=true
            if ($("#resourceType").val() == '' || $("#resourceType").val()== null || $("#resourceType").val() == undefined) {
                layer.msg('请选择菜单类型！');
                flag= false;
            }else{
                $.ajax({
                    type: 'POST',
                    url: "/system/resource/addResource",
                    data: data.field,
                    async:false,
                    success: function (res) {
                        if (res == "success") {
                            layer.msg("增加成功",{
                                time: 800
                            },function () {
                                // 关闭自己
                                layer.closeAll();
                                window.location.reload();
                            });
                        } else {
                            flag= false;
                            layer.msg("增加失败",{  time:2000 });
                        }
                    }
                });
            }


            return flag;
        });
    });
</script>
<!--弹框-->
<script>
    var $ = layui.jquery,
        layer = layui.layer;

    $('#modal1').on('click', function () {
        layer.open({
            title: "添加菜单",
            type: 1,
            content: $("#modal-content1"),
            area: ['500px', '470px'],
            shadeClose: true,
            end: function () {
                //关闭窗口时清空表单内容
                $("#modal-content1").find('input[type=text],select,textarea,input[type=hidden]').each(function () {
                    $(this).val('');
                });
            }
        });
    });
</script>

<!--点击按钮事件-->
<script>
    //请求父菜单
    $(function () {
        $.ajax({
            type: "GET",//请求方式
            url: "/system/resource/getParentResource",
            dataType: "json",
            success: function (result) {
                for (var i = 0; i < result.length; i++) {
                    $("#parentName").append("<option value='" + result[i]['resourceName'] + "'>" + result[i]['resourceName'] + "</option>");
                }
            }
        });
    });
</script>

<script>
    /**
     * 编辑菜单
     * @param btn 按钮
     */
    function editResource(btn) {
        // 当前行的id
        var id = $(btn).parent().parent().parent().attr("data-tb-id");
        layer.open({
            title: "编辑菜单",
            type: 2,
            content: "/system/resource/update/" + id,
            area: ['500px', '560px'],
            shadeClose: true,
            end: function () {
                //关闭窗口时清空表单内容
                $("#modal-content1").find('input[type=text],select,textarea,input[type=hidden]').each(function () {
                    $(this).val('');
                });
            }
        });
    }

    /**
     * 删除
     */
    function deleteResource(btn) {

        // 当前行的id
        var id = $(btn).parent().parent().parent().attr("data-tb-id");
        /**
         * 向后台请求更删除
         */
        layer.confirm('确定删除当前行？', function (index) {
            layer.close(index);
            //向服务端发送删除指令
            layui.$.ajax({
                type: 'DELETE',
                url: "/system/resource/del/" + id,
                success: function (res) {
                    // console.log(res);
                    layer.closeAll();
                    if (res.code == 0) {
                        layer.msg("删除成功",{
                            time: 800
                        },function () {
                            // 关闭自己
                            window.location.reload();
                        });
                    } else {
                        layer.msg("修改失败",{  time:2000 });
                    }
                }
            });
        });
    }

    /**
     * 新增子菜单
     */
    function addResource(btn) {
        // 当前行的id
        var id = $(btn).parent().parent().parent().attr("data-tb-id");

        layer.open({
            title: "新增资源",
            type: 2,
            content: "/system/resource/add/" + id,
            area: ['500px', '580px'],
            shadeClose: true,
            end: function () {

            }
        });
    }
</script>
</body>
</html>